import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 按需导入ep
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 支持svg
//@ts-ignore
import postcssPxToViewport from 'postcss-px-to-viewport'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  root: process.cwd(), // 绝对路径
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n'], //根据情况自己配置  文档https://github.com/unplugin/unplugin-auto-import
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: 'src/auto-import.d.ts',
      resolvers: [ElementPlusResolver()] //elm按需加载
    }),
    Components({
      //引入组件自动按需引入，不再需要import  文档：https://github.com/unplugin/unplugin-vue-components#readme
      dts: true, //生成components.d.ts全局声明，如果安装了ts默认为true
      dirs: ['src/components'], //默认就是这个路径，可以自行修改
      resolvers: [ElementPlusResolver()] // 自定义组件
    }),
    // 支持svg
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'src/icons/svg')], // 要缓存的图标文件夹
      symbolId: 'icon-[name]' // 执行 icon name 的格式
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      // 引入全局scss
      scss: {
        additionalData: `@import "./src/styles/base.scss";`
      }
    },
    postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px', // 需要转换的单位，默认为"px"
          viewportWidth: 1920, // 设计稿的视口宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: false, // 媒体查询里的单位是否需要转换单位
          replace: true, //  是否直接更换属性值，而不添加备用属性
          exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 横屏时使用的单位
          landscapeWidth: 1920 // 横屏时使用的视口宽度
        })
      ]
    }
  },
  server: {
    //服务器配置:https://vitejs.dev/config/server-options.html#server-hmr
    port: 8081,
    host: '0.0.0.0',
    open: false,
    // 热更新
    hmr: {
      overlay: false
    },
    proxy: {
      // 本地后端代理
      '/api': {
        //要访问的跨域的域名
        // target: "http://localhost:8888",
        target: 'http://lushixin.top:8888/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  // 打包输出
  build: {
    sourcemap: false,
    // 消除打包大小超过500kb警告
    chunkSizeWarningLimit: 4000,
    rollupOptions: {
      input: {
        index: resolve('index.html')
      },
      // 静态资源分类打包
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})
